<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-19 08:40:46
 * @Description  : 存储源卡片
-->

<template>
  <div class="storage-card">
    <div class="img flex justify-center items-center" @click="handleCardClick">
      <SvgIcon :icon="iconArr[storageOrigin.type]" size="80px"></SvgIcon>
    </div>
    <div class="title">{{ storageOrigin.name }}</div>
    <div class="type">{{ typeArr[storageOrigin.type] }}</div>
    <div
      class="action !text-[13px] mt-2"
      v-permission="[PERMISSIONS.STORAGE_EDIT]"
    >
      <n-button-group size="small">
        <n-button type="tertiary">
          <template #icon>
            <SvgIcon icon="wenjianjia1" size="13px"></SvgIcon>
          </template>
          文件管理
        </n-button>
        <!-- <n-button> -->
        <n-dropdown
          trigger="click"
          :options="options"
          @select="handleSelect"
          :render-label="renderDropdownLabel"
        >
          <n-button>
            <SvgIcon icon="xiala1" size="13px"></SvgIcon>
          </n-button>
        </n-dropdown>
        <!-- </n-button> -->
      </n-button-group>
    </div>
    <div class="flex justify-center mt-2">
      <n-progress
        class="!w-[90%]"
        type="line"
        :percentage="50"
        :show-indicator="false"
      />
    </div>

    <div class="capacity">
      <n-gradient-text type="info"> 0B/1TB </n-gradient-text>
    </div>

    <div class="flag-box" v-if="storageOrigin.isDefault">
      <div class="flag">当前默认</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { VNodeChild } from 'vue'
import type { IndexObj } from '@/types/commom'
import type { StorageOriginRes } from '@/types/storageOrigin'
import { PERMISSIONS } from '@/constants/permission'
import SvgIcon from '@/components/SvgIcon/index.vue'

const props = defineProps<{
  storageOrigin: StorageOriginRes
}>()

const typeArr = reactive<IndexObj>({
  LOCAL: '本地',
  OSS: '阿里云OSS'
})

const iconArr = reactive<IndexObj>({
  LOCAL: 'cipan',
  OSS: 'aliyun'
})

const emits = defineEmits<{
  (e: 'selectChange', type: string, data: StorageOriginRes): void
}>()

// 根据当前传入的item来进行选项按需渲染
const options = ref<IndexObj[]>()
const loadOptions = () => {
  if (props.storageOrigin.isDefault) {
    options.value = [
      {
        label: '修改配置',
        key: 'modify',
        myIcon: 'shezhi-shezhi-tianchong'
      }
    ]
  } else {
    options.value = [
      {
        label: '设为默认',
        key: 'setDefault',
        myIcon: 'tick'
      },
      {
        label: '修改配置',
        key: 'modify',
        myIcon: 'shezhi-shezhi-tianchong'
      },
      {
        label: '迁移数据',
        key: 'moveData',
        myIcon: 'transmission'
      },
      {
        label: '卸载存储',
        key: 'remove',
        myIcon: 'huishouzhan'
      }
    ]
  }
}

const renderDropdownLabel = (option: IndexObj): VNodeChild => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center',
        fontSize: '13px'
      }
    },
    [
      h(SvgIcon, {
        icon: option.myIcon,
        size: '13px',
        class: 'mr-2'
      }),
      option.label
    ]
  )
}

onMounted(() => {
  loadOptions()
})

const handleSelect = (key: string) => {
  emits('selectChange', key, props.storageOrigin)
}

const handleCardClick = () => {
  emits('selectChange', 'modify', props.storageOrigin)
}
</script>

<style scoped lang="scss">
.storage-card {
  position: relative;
  width: 140px;
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;

  transition: 0.16s all;
  border-radius: 4px;
  background: none;
  border: 1px solid #dee5e7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 15px 20px 0;
  cursor: pointer;

  &:hover {
    background: #fff;
    box-shadow:
      0 20px 100px rgba(0, 0, 0, 0.1),
      0 20px 30px rgba(0, 0, 0, 0.05);
  }

  .img {
    // width: 100%;
    height: 90px;
    background-image: linear-gradient(to bottom, #def 0, #fff 100%);
  }

  .title {
    color: #444;
    font-weight: 800;
  }

  .type {
    color: #aaa;
  }

  :deep(.n-button__content) {
    font-size: 13px;
  }

  .flag-box {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 60px;
    height: 60px;

    .flag {
      position: absolute;
      top: 10px;
      right: -28px;
      width: 100px;
      height: 22px;
      line-height: 22px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: rotate(45deg);
      background-color: #00924c;
    }
  }
}
</style>
